<template>
  <div class="content">
    <div style="height:30%" v-if="state===0"></div>
    <div class="guide" v-else>
      <span class="guide1" v-if="state===1"></span>
      <span class="guide2" v-if="state===1"></span>
    </div>
    <div class="blocker">
      <div class="instructions" v-if="state===1">
        <p style="font-size:100px;text-align:center">{{ curCotent[0] }}</p>
      </div>
      <div class="instructions" v-if="state===2||state===3">
        <p style="font-size:100px;text-align:center">{{ curCotent }}</p>
      </div>
      <div class="instructions" v-if="state===0">
        <p style="font-size:25px;text-align:left">
          接下来屏幕中央会出现一系列的词汇，请您判断词汇的类别，然后按键。</p>
        <p style="font-size:25px;text-align:left">如果呈现的是与<span style="color: red">女性或语言</span>相关的词汇请按<span
            style="color: red">F</span>键。</p>
        <p style="font-size:25px;text-align:left">如果呈现的是与<span style="color: blue">男性或空间</span>相关的词汇请按<span
            style="color: blue">J</span>键。</p>
        <p style="font-size:25px;text-align:left">明白上述指导语后，请按空格键开始实验。</p>
                <p style="font-weight:bold;color: red;font-size:30px;text-align:left">下面是正式测试阶段，你作答后将不再得到正确或错误的反馈。你在本阶段的作答将计入最终成绩。</p>

      </div>
      <div class="instructions" v-if="state===4">
        <p style="font-size:25px;text-align:center">
          任务结束，请按空格键开始下一项任务</p>
      </div>
    </div>
    <div class="back"></div>
  </div>


</template>

<script>
import {useRouter} from "vue-router";
import {postAnswer} from "@/utils/api";
import {message} from 'ant-design-vue';

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Test1",
  data() {
    return {
      arrCotent: [["爸爸", "j"], ['男人', 'j'], ["爷爷", 'j'], ["他", 'j'], ["叔叔", 'j'], ["丈夫", 'j'], ["男孩", 'j'], ["男生", 'j'], ["她", 'f'], ["女人", 'f'], ["妈妈", 'f'], ["妻子", 'f'], ["女生", 'f'], ["女孩", 'f'], ["奶奶", 'f'], ["阿姨", 'f'], ["立体", "j"], ["导航", "j"], ["方向", "j"], ["结构", "j"], ["距离", "j"], ["广度", "j"], ["位置", "j"], ["定位", "j"], ["词语", 'f'], ["语句", 'f'], ["小说", 'f'], ["文字", 'f'], ["阅读", 'f'], ["语文", 'j'], ["文学", 'f'], ["诗歌", 'f']],
      state: 0, // 0为介绍，1为任务,2为+号，3为答案，4为结束
      curLeval: 0,
      answer: "",
      req: [],
      delta: null,
      router: useRouter(),
    };
  },

  created: function () {
    const _this = this;
    document.onkeydown = function (event) {
      let key = event.key;
      if (_this.state === 0) {
        if (key === " ") {
          _this.curLeval += 1;
          _this.plus();
          _this.cont();
          _this.blank();
          return
        } else {
          message.error("请输入正确的键位");
        }
      }
      if (_this.state === 1) {
        if (key === 'j' || key === 'f') {
          _this.load(key);
          return
        } else {
          message.error("请输入正确的键位");
        }
      }
      if (_this.state === 4) {
        if (key === " ") {
          _this.router.push("/test1/round5")
        } else {
          message.error("请输入正确的键位");
        }
      }
    };
  },
  computed: {
    curCotent: function () {
      let res;
      if (this.state === 1) {
        const i = Math.floor(Math.random() * this.arrCotent.length)
        const w = this.arrCotent[i];
        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
        this.arrCotent.splice(i, 1);
        res = w;
      }
      if (this.state === 2) {
        res = "+";
      }
      if (this.state === 3) {
        res = this.answer;
      }
      if (this.state === 5) {
        res = "";
      }
      return res;
    },
  },
  methods: {
    cont: function () {
      let _this = this
      setTimeout(function () {
        _this.state = 5;
      }, 750);
    },
    plus: function () {
      let _this = this
      setTimeout(function () {
        _this.state = 2;
      }, 250);
    },
    blank: function () {
      let _this = this
      setTimeout(function () {
        _this.state = 1;
        _this.delta = new Date();
      }, 950);
    },
    end: function () {
      let _this = this
      setTimeout(function () {
        _this.state = 4;
      }, 500);
    },
    load: async function (key) {
      if (this.curCotent[1] === key) {
        this.answer = "正确"
      } else {
        this.answer = "错误"
      }
      let data = {"token": this.curCotent[0], "answer": this.answer, "delta": new Date() - this.delta};
      this.req.push(data);
      this.curLeval += 1;
      // this.state = 3;
      if (this.curLeval === 33) {
        this.server();
        this.end();
        return
      }
      this.plus();
      this.cont();
      this.blank();
    },
    server: function () {
      postAnswer(this.req,"test1",4)
    },
  }
}

</script>

<style scoped>
.content {
  width: calc(100% - 200px)!important;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  cursor: pointer;
  position: absolute;
  flex-direction: column;
}

.blocker {
  justify-content: center;
  display: flex;
  flex-direction: row;
  width: 100%;
  height: 33%;
}

.instructions {
  width: 50%;
  color: #ffffff;
}

.guide {
  display: flex;
  flex-direction: row;
  margin: 20px;
  height: 33%;
  color: #ffffff;
  font-size: 20px;
}

.guide1 {
  top: 0;
  left: 0;
}

.guide2 {
  margin-left: auto;
}

.back {
  height: 33%;
}

</style>
